<template>
	<!-- 组件结构 -->
	<div class="student">
		<h2 >学生名称:{{name}}</h2>
		<h2>学生性别:{{sex}}</h2>
		<h2>当前求和为:{{number}}</h2>
		<button type="button" @click="add">点击number++</button>
		
		<button type="button" @click="sendStudentName">点击学生名传给APP</button>
		<button type="button" @click="unbind">解绑事件</button>
		<button type="button" @click="death">销毁当前student组件的实例</button>
	</div>
</template>

<script>
	// 组件交互相关的代码(数据、方法等)
	// 创建school组件
	export default {
		name:'Student',
		// data 要写成函数式
		data(){
			return{
				name:'老王',
				sex:'男',
				number:0
			};
		},
		methods:{
			add(){
				console.info('add被调用了');
				this.number++;
			},
			sendStudentName(){
				// $emit() 触发、爆发
				// 触发Student实例身上的 yhw 事件
				this.$emit('yhw',this.name,666,888,111);
				// this.$emit('click');
			},
			unbind(){
				// 解绑API $off()
				// 解绑一个自定义事件
				this.$off('yhw')
				// 解绑多个自定义事件
				// this.$off(['yhw','demo'])
				// 所有自定义事件都解绑
				// this.$off()
			},
			death(){
				// 销毁当前student组件的实例,销毁后所有student实例的自定义事件全都不奏效
				this.$destroy()
			}
		}
	};
</script>

<style scoped>
	/* scoped样式 是为了让样式在局部生效，防止冲突 */
	/* 组件的样式 */
	.student{
		background-color: #00557f;
		color: #FF5500;
		padding: 5px;
		margin-top: 10px;
	}
</style>

